<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //1.获取需要触发事件的元素对象
           var all = document.querySelector("#all");
           var reverse = document.querySelector("#reverse");

            //获取被改变的元素对象 数组
           var hobbys = document.getElementsByName("hobby");


            //2.绑定事件
            all.onclick=function(){
                //3.进行改变
                //所有数组中的复选框状态=全选按钮的状态
                for(let i=0;i < hobbys.length;i++){
                    hobbys[i].checked = this.checked;
                }
            }

            reverse.onclick=function(){
                //状态等于自己状态的反向
                for(let i = 0;i < hobbys.length;i++){
                  hobbys[i].checked = !hobbys[i].checked;
                }
            }  
        }

    </script>
</head>
<body>
    <div>
        <input type="checkbox" id="all">全选
        <input type="checkbox" id="reverse">反选
    </div>
    <p><input type="checkbox" name="hobby">游戏</p>
    <p><input type="checkbox" name="hobby">音乐</p>
    <p><input type="checkbox" name="hobby">视频</p>
    <p><input type="checkbox" name="hobby">电视</p>
    <p><input type="checkbox" name="hobby">运动</p>
</body>
</html>